<script setup lang="ts">
import { fullUrl } from '@/utils/common'
import { safeBottom } from '@/utils/constants'
import { postOrderRefundApi } from '@/api/order'
import { computed, reactive } from 'vue'
import { ref } from 'vue'
import { pageUrl } from '@/utils/constants'
import { uploadApi } from '@/api/common'

const props = defineProps<{
  order_id: number
  detail_data?: string
}>()

const detailData = JSON.parse(props.detail_data ?? '{}')
const refundTypeArr = [
  { value: 1, text: 'Return & Refund' },
  { value: 2, text: 'Exchange' },
]
const tmpPathArr = ref<string[]>([])
const imagePathArr = ref<string[]>([])
const onSelect = (e: UniHelper.UniFilePickerOnSelectEvent) => {
  tmpPathArr.value = tmpPathArr.value.concat(e.tempFilePaths)
}
const onDelete = (e: UniHelper.UniFilePickerOnDeleteEvent) => {
  // 移除图片
  const index = tmpPathArr.value.findIndex((item) => item === e.tempFilePath)
  tmpPathArr.value.splice(index, 1)
}

const applyForm = reactive({
  refund_type: 1,
  refund_num: 1,
  apply_money: detailData.pay_price,
  remark: '',
  remark_images: [],
})

const maxApplyNum = computed(() => {
  return parseFloat(detailData.num)
})
const maxApplyAmount = computed(() => {
  return parseFloat(detailData.pay_price)
})

// 提交申请
const onSubmit = async () => {
  if (!applyForm.remark) {
    uni.showToast({
      title: 'Please enter your application description',
      icon: 'none',
    })
    return
  }
  const uploadPromises = tmpPathArr.value.map((item) => {
    return new Promise((resolve) => {
      uploadApi(item).then((res) => {
        imagePathArr.value.push(res.result.url)
        resolve(res)
      })
    })
  })

  try {
    await Promise.all(uploadPromises)

    // 退款
    const res = await postOrderRefundApi({
      id: props.order_id,
      detail_id: detailData.id,
      refund_type: applyForm.refund_type,
      refund_num: applyForm.refund_num,
      remark: applyForm.remark,
      apply_money: applyForm.apply_money,
      remark_images: imagePathArr.value.join(','),
    })

    if (res.result) {
      uni.showToast({
        title: 'Application submitted, please wait for merchant processing',
        icon: 'none',
        mask: true,
      })
    }

    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } catch (error) {
    console.error(error)
  }
}
</script>

<template>
  <view class="panel goods">
    <view class="item">
      <navigator
        class="navigator"
        :url="`${pageUrl['goods-detail']}?id=${detailData.goods_id}`"
        hover-class="none"
      >
        <image class="cover" :src="fullUrl(detailData.image)"></image>
        <view class="meta">
          <view class="name ellipsis">{{ detailData.goods_name }}</view>
          <view class="type">{{ detailData.spec_text }}</view>
          <view class="price">
            <view class="actual">
              <text class="symbol">$</text>
              <text>{{ detailData.price }}</text>
            </view>
          </view>
          <view class="quantity">x{{ detailData.num }}</view>
        </view>
      </navigator>
    </view>
  </view>
  <view class="panel">
    <view class="panel-item">
      <view class="item-title">
        <text>After-sales type:</text>
      </view>
      <view class="content">
        <uni-data-checkbox mode="tag" v-model="applyForm.refund_type" :localdata="refundTypeArr" />
      </view>
    </view>
    <view class="panel-item">
      <view class="item-title">
        <text>After-sales quantity:</text>
      </view>
      <view class="content">
        <uni-number-box v-model="applyForm.refund_num" :min="1" :max="maxApplyNum" />
      </view>
    </view>
    <view class="panel-item" v-if="applyForm.refund_type == 1">
      <view class="item-title">
        <text>Application amount:</text>
      </view>
      <view class="content">
        <uni-number-box v-model="applyForm.apply_money" :min="0.01" :max="maxApplyAmount" />
      </view>
    </view>
  </view>
  <view class="panel">
    <view class="panel-item2">
      <view class="item-title">Application Instructions</view>
      <view class="content">
        <uni-easyinput
          type="textarea"
          v-model="applyForm.remark"
          placeholder="Clear description helps merchant process your request faster"
        />
      </view>
    </view>
    <view class="panel-item2">
      <view class="item-title">Upload vouchers (up to 6)</view>
      <view class="content">
        <uni-file-picker
          class="image"
          v-model="applyForm.remark_images"
          file-mediatype="image"
          mode="grid"
          file-extname="png,jpg"
          :limit="6"
          return-type="array"
          :auto-upload="false"
          @select="onSelect"
          @delete="onDelete"
        />
      </view>
    </view>
  </view>
  <view class="sub-button" :style="safeBottom">
    <button @tap="onSubmit">Submit Application</button>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f8;
}

.panel {
  margin: 20rpx 20rpx;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  background-color: #fff;

  .panel-item {
    display: flex; // 使用flex布局
    align-items: center; // 垂直居中
    justify-content: space-between; // 水平方向上的空间分布
    padding: 10rpx 0;
    margin-bottom: 20rpx;
  }

  .item-title {
    font-size: 26rpx;
  }

  .content {
    margin-bottom: 10rpx;
  }

  .price-value {
    color: red;
  }

  .panel-item2 {
    .item-title {
      padding: 10rpx 0 30rpx;
    }
  }

  .image {
    padding: 10rpx 0 10rpx 0;
    .uni-file-picker {
      margin-top: 20rpx;
    }
  }
}

.goods {
  .item {
    .navigator {
      display: flex;
      margin: 20rpx 0;
    }

    .cover {
      width: 170rpx;
      height: 170rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: relative;
    }

    .name {
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 6rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
      max-width: 90%;
    }

    .price {
      display: flex;
      margin-top: 6rpx;
      font-size: 24rpx;
    }

    .symbol {
      font-size: 20rpx;
    }

    .original {
      color: #999;
      text-decoration: line-through;
    }

    .actual {
      margin-left: 10rpx;
      color: #444;
    }

    .text {
      font-size: 22rpx;
    }

    .evaluate {
      position: absolute;
      right: 0;
      font-size: 24rpx;
      bottom: 50rpx;

      .button {
        width: 80rpx;
        text-align: center;
        justify-content: center;
        margin-left: 20rpx;
        border-radius: 60rpx;
        border: 1rpx solid #ccc;
        color: #444;
      }
    }

    .quantity {
      position: absolute;
      right: 0;
      font-size: 24rpx;
      color: #444;
    }

    .action {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;
      padding: 30rpx 0 0;

      .button {
        width: 200rpx;
        height: 60rpx;
        text-align: center;
        justify-content: center;
        line-height: 60rpx;
        margin-left: 20rpx;
        border-radius: 60rpx;
        border: 1rpx solid #ccc;
        font-size: 26rpx;
        color: #444;
      }

      .primary {
        color: #ff5f3c;
        border-color: #ff5f3c;
      }
    }
  }
}

.sub-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;

  .button-container {
    background-color: white;
    padding: 10rpx;
    border-radius: 30rpx;
    width: 100%;
  }

  button {
    width: 100%;
    background-color: #ff5f3c;
    color: white;
    border-radius: 20rpx;
    text-align: center;
    cursor: pointer;
    margin: 20rpx;
  }
}
</style>
